<template>
  <div class="home">
    <main><router-view></router-view></main>
    <footer>
      <router-link to="/home/homepage">
      <van-icon name="home-o" />
      <span>首页</span>
      </router-link>
      <router-link to="/home/live">
      <van-icon name="tv-o" />
      <span>直播</span>
      </router-link>
      <router-link to="/home/cash">
      <van-icon name="balance-o" />
      <span>摇现金</span>
      </router-link>
      <router-link to="/home/chat">
      <van-icon name="chat-o" />
      <span>聊天</span>
      </router-link>
      <router-link to="/home/personal">
      <van-icon name="contact" />
      <span>个人中心</span>
      </router-link>                             
    </footer>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  components: {},
};
</script>
<style lang='scss'>
*{
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
a{
  text-decoration: none;
}
html,body,#app,.home{
  width: 100%;
  height: 100%;
}
.home{
  display: flex;
  flex-direction: column;
  main{
    flex: 1;
    overflow-y: scroll;
  }
  footer{
    width: 100%;
    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    a{
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #333;
      .van-icon{
        font-size: 30px;
      }
    }
  }
  .router-link-active{
    color: #f04;
  }
}
</style>
